<!DOCTYPE html>
<!-- saved from url=(0249)https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家庭任务发布模块核心设计文档</title>
    <script src="./家庭任务发布模块核心设计文档_files/3.3.3"></script>
    <link rel="stylesheet" href="./家庭任务发布模块核心设计文档_files/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
            color: #334155;
        }
        .glassmorphism {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
        }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #3b82f6;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .table-container {
            overflow-x: auto;
        }
        table {
            min-width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        th {
            background-color: #f1f5f9;
            position: sticky;
            top: 0;
        }
        tr:nth-child(even) {
            background-color: #f8fafc;
        }
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .parent-badge {
            background-color: #e0f2fe;
            color: #0369a1;
        }
        .child-badge {
            background-color: #dcfce7;
            color: #166534;
        }
        .task-type-badge {
            background-color: #ede9fe;
            color: #5b21b6;
        }
        .frequency-badge {
            background-color: #fce7f3;
            color: #9d174d;
        }
        .cycle-badge {
            background-color: #ecfdf5;
            color: #065f46;
        }
        .code-block {
            background-color: #1e293b;
            color: #f8fafc;
            border-radius: 8px;
            padding: 1rem;
            font-family: 'Courier New', Courier, monospace;
            overflow-x: auto;
        }
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .mobile-menu.active {
            max-height: 500px;
        }
    </style>
<style>/* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.sticky{position:sticky}.top-0{top:0px}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mb-12{margin-bottom:3rem}.mb-3{margin-bottom:0.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-2{margin-right:0.5rem}.mr-3{margin-right:0.75rem}.mt-1{margin-top:0.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:0.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-8{height:2rem}.min-h-screen{min-height:100vh}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}.flex-shrink-0{flex-shrink:0}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-8{gap:2rem}.space-x-6 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-3 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246 / var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pl-8{padding-left:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.hover\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width: 768px){.md\:flex{display:flex}.md\:hidden{display:none}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}</style></head>
<body class="min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50 shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fas fa-tasks text-blue-500 text-xl mr-2"></i>
                <span class="text-xl font-bold text-blue-600">家庭任务系统</span>
            </div>
            
            <!-- 桌面导航 -->
            <div class="hidden md:flex space-x-6">
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#role-permission" class="nav-link text-gray-600 hover:text-blue-500">角色权限</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#task-types" class="nav-link text-gray-600 hover:text-blue-500">任务类型</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#reward-system" class="nav-link text-gray-600 hover:text-blue-500">奖励系统</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#core-process" class="nav-link text-gray-600 hover:text-blue-500">核心流程</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#ui-planning" class="nav-link text-gray-600 hover:text-blue-500">界面规划</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#data-structure" class="nav-link text-gray-600 hover:text-blue-500">数据结构</a>
            </div>
            
            <!-- 移动端菜单按钮 -->
            <button id="mobileMenuButton" class="md:hidden text-gray-600 focus:outline-none">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="mobile-menu md:hidden bg-white px-4">
            <div class="py-2 space-y-2">
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#role-permission" class="block py-2 text-gray-600 hover:text-blue-500">角色权限</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#task-types" class="block py-2 text-gray-600 hover:text-blue-500">任务类型</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#reward-system" class="block py-2 text-gray-600 hover:text-blue-500">奖励系统</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#core-process" class="block py-2 text-gray-600 hover:text-blue-500">核心流程</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#ui-planning" class="block py-2 text-gray-600 hover:text-blue-500">界面规划</a>
                <a href="https://space-static.coze.cn/7533506111966904615/%E5%AE%B6%E5%BA%AD%E4%BB%BB%E5%8A%A1%E6%A8%A1%E5%9D%97%E8%AE%BE%E8%AE%A1%E6%96%87%E6%A1%A3-70217e4cd1.html?sign=1756627393-cd4c1e07fa-0-c8cc88c789ac568779c5981afc1f433c3fbfcfc238b203e9d2be3da42c2400ff#data-structure" class="block py-2 text-gray-600 hover:text-blue-500">数据结构</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 标题部分 -->
        <section class="mb-12 text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">家庭任务发布模块核心设计文档</h1>
            <p class="text-lg text-gray-600 max-w-3xl mx-auto">一套完整的家庭任务管理与奖励系统设计方案</p>
        </section>

        <!-- 1. 角色权限体系 -->
        <section id="role-permission" class="glassmorphism p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">1</span>
                角色权限体系
            </h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- 家长账户权限 -->
                <div>
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="badge parent-badge mr-3">家长</span>
                        家长账户权限
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>任务管理：发布/编辑/删除/归档任务</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>奖励配置：设置积分值、经验值、奖励类型</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>任务确认：审核孩子提交的任务完成情况</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>商城管理：添加/编辑/下架商品，设置库存</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>数据查看：查看所有家庭成员的任务完成数据</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 孩子账户权限 -->
                <div>
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="badge child-badge mr-3">孩子</span>
                        孩子账户权限
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>任务操作：浏览/接取/提交任务</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>奖励查看：查看个人积分、经验值和徽章</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>积分兑换：在商城兑换可用商品</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>历史记录：查看个人任务完成历史</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- 2. 任务类型设计 -->
        <section id="task-types" class="glassmorphism p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">2</span>
                任务类型设计
            </h2>
            
            <!-- 2.1 参与维度分类 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">2.1 参与维度分类</h3>
                <div class="table-container">
                    <table class="w-full border border-gray-200 rounded-lg overflow-hidden">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left bg-gray-100">类型</th>
                                <th class="px-4 py-3 text-left bg-gray-100">特点</th>
                                <th class="px-4 py-3 text-left bg-gray-100">适用场景</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-4 py-3 border-b border-gray-200">单人任务</td>
                                <td class="px-4 py-3 border-b border-gray-200">指定单个孩子或开放接取</td>
                                <td class="px-4 py-3 border-b border-gray-200">个人专属任务（如"小明的数学作业"）</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3">多人任务</td>
                                <td class="px-4 py-3">多个孩子可同时接取</td>
                                <td class="px-4 py-3">家庭共同任务（如"整理客厅"）</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 2.2 频次维度分类 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">2.2 频次维度分类</h3>
                <div class="table-container">
                    <table class="w-full border border-gray-200 rounded-lg overflow-hidden">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left bg-gray-100">类型</th>
                                <th class="px-4 py-3 text-left bg-gray-100">完成规则</th>
                                <th class="px-4 py-3 text-left bg-gray-100">状态处理</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-4 py-3 border-b border-gray-200">单次任务</td>
                                <td class="px-4 py-3 border-b border-gray-200">完成后自动归档</td>
                                <td class="px-4 py-3 border-b border-gray-200">进入历史记录</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3">重复任务</td>
                                <td class="px-4 py-3">可设置周期：每日/每周/每月</td>
                                <td class="px-4 py-3">周期结束后自动重置为待接取</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 2.3 周期维度分类 -->
            <div>
                <h3 class="text-xl font-semibold mb-4">2.3 周期维度分类</h3>
                <div class="table-container">
                    <table class="w-full border border-gray-200 rounded-lg overflow-hidden">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left bg-gray-100">类型</th>
                                <th class="px-4 py-3 text-left bg-gray-100">结构设计</th>
                                <th class="px-4 py-3 text-left bg-gray-100">奖励发放</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-4 py-3 border-b border-gray-200">一次性任务</td>
                                <td class="px-4 py-3 border-b border-gray-200">单个任务节点</td>
                                <td class="px-4 py-3 border-b border-gray-200">完成后发放全部奖励</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3">阶段性任务</td>
                                <td class="px-4 py-3">包含多个子任务节点</td>
                                <td class="px-4 py-3">子任务奖励+阶段总奖励</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 3. 奖励系统设计 -->
        <section id="reward-system" class="glassmorphism p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">3</span>
                奖励系统设计
            </h2>
            
            <!-- 3.1 奖励类型 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">3.1 奖励类型</h3>
                <ul class="space-y-4">
                    <li class="flex items-start">
                        <i class="fas fa-gift text-blue-500 mt-1 mr-3"></i>
                        <div>
                            <span class="font-medium">一次性奖励</span>：任务完成后发放固定积分和经验
                        </div>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-redo text-blue-500 mt-1 mr-3"></i>
                        <div>
                            <span class="font-medium">多次奖励</span>：重复任务每次完成均发放奖励
                        </div>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-trophy text-blue-500 mt-1 mr-3"></i>
                        <div>
                            <span class="font-medium">阶段性奖励</span>：
                            <ul class="mt-2 space-y-2 pl-4">
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs text-blue-300 mt-2 mr-2"></i>
                                    <span>基础奖励：完成单个子任务获得</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs text-blue-300 mt-2 mr-2"></i>
                                    <span>里程碑奖励：完成特定阶段获得额外奖励</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-circle text-xs text-blue-300 mt-2 mr-2"></i>
                                    <span>总奖励：所有阶段完成后获得最终奖励</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            
            <!-- 3.2 经验等级体系 -->
            <div>
                <h3 class="text-xl font-semibold mb-4">3.2 经验等级体系</h3>
                <div class="table-container">
                    <table class="w-full border border-gray-200 rounded-lg overflow-hidden">
                        <thead>
                            <tr>
                                <th class="px-4 py-3 text-left bg-gray-100">等级</th>
                                <th class="px-4 py-3 text-left bg-gray-100">徽章名称</th>
                                <th class="px-4 py-3 text-left bg-gray-100">所需经验</th>
                                <th class="px-4 py-3 text-left bg-gray-100">达成条件</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-4 py-3 border-b border-gray-200">Lv1</td>
                                <td class="px-4 py-3 border-b border-gray-200">新手徽章</td>
                                <td class="px-4 py-3 border-b border-gray-200">0-100</td>
                                <td class="px-4 py-3 border-b border-gray-200">完成首个任务</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 border-b border-gray-200">Lv2</td>
                                <td class="px-4 py-3 border-b border-gray-200">成长徽章</td>
                                <td class="px-4 py-3 border-b border-gray-200">101-300</td>
                                <td class="px-4 py-3 border-b border-gray-200">累计完成5个任务</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 border-b border-gray-200">Lv3</td>
                                <td class="px-4 py-3 border-b border-gray-200">能手徽章</td>
                                <td class="px-4 py-3 border-b border-gray-200">301-600</td>
                                <td class="px-4 py-3 border-b border-gray-200">累计获得500积分</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 border-b border-gray-200">Lv4</td>
                                <td class="px-4 py-3 border-b border-gray-200">专家徽章</td>
                                <td class="px-4 py-3 border-b border-gray-200">601-1000</td>
                                <td class="px-4 py-3 border-b border-gray-200">完成3个阶段性任务</td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3">Lv5</td>
                                <td class="px-4 py-3">大师徽章</td>
                                <td class="px-4 py-3">1001+</td>
                                <td class="px-4 py-3">连续30天完成每日任务</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- 4. 核心流程设计 -->
        <section id="core-process" class="glassmorphism p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">4</span>
                核心流程设计
            </h2>
            
            <!-- 4.1 任务生命周期 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">4.1 任务生命周期</h3>
                <ol class="space-y-4 pl-6">
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                        <div>
                            <span class="font-medium">创建阶段</span>：家长填写任务信息、设置奖励和类型
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                        <div>
                            <span class="font-medium">接取阶段</span>：孩子浏览任务列表并选择接取
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                        <div>
                            <span class="font-medium">执行阶段</span>：孩子完成任务后提交完成申请
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">4</span>
                        <div>
                            <span class="font-medium">确认阶段</span>：家长审核并确认任务完成状态
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">5</span>
                        <div>
                            <span class="font-medium">结算阶段</span>：系统自动发放积分和经验值
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">6</span>
                        <div>
                            <span class="font-medium">归档阶段</span>：任务进入历史记录，重复任务自动重置
                        </div>
                    </li>
                </ol>
            </div>
            
            <!-- 4.2 积分商城兑换流程 -->
            <div>
                <h3 class="text-xl font-semibold mb-4">4.2 积分商城兑换流程</h3>
                <ol class="space-y-4 pl-6">
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                        <div>
                            <span class="font-medium">浏览商品</span>：孩子浏览商品列表，查看积分要求和库存
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                        <div>
                            <span class="font-medium">提交申请</span>：选择商品提交兑换申请
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                        <div>
                            <span class="font-medium">系统校验</span>：系统校验积分是否充足并扣减相应积分
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">4</span>
                        <div>
                            <span class="font-medium">更新库存</span>：更新商品库存，生成兑换记录
                        </div>
                    </li>
                    <li class="flex items-start">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">5</span>
                        <div>
                            <span class="font-medium">家长发放</span>：家长查看兑换记录并发放实物商品
                        </div>
                    </li>
                </ol>
            </div>
        </section>

        <!-- 5. 交互与界面规划 -->
        <section id="ui-planning" class="glassmorphism p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">5</span>
                交互与界面规划
            </h2>
            
            <!-- 5.1 家长端界面 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">5.1 家长端界面</h3>
                
                <!-- 5.1.1 仪表盘设计 -->
                <div class="mb-6">
                    <h4 class="text-lg font-medium mb-3">5.1.1 仪表盘设计</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-chart-pie text-blue-500 mt-1 mr-2"></i>
                            <span>核心数据区：显示本周任务完成率、待确认任务数、积分发放统计</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-bolt text-blue-500 mt-1 mr-2"></i>
                            <span>快速操作区："发布新任务"、"待确认任务"、"商城管理"快捷入口</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-chart-line text-blue-500 mt-1 mr-2"></i>
                            <span>数据趋势图：近30天家庭任务完成量和积分消耗趋势</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 5.1.2 任务管理界面 -->
                <div>
                    <h4 class="text-lg font-medium mb-3">5.1.2 任务管理界面</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-list text-blue-500 mt-1 mr-2"></i>
                            <span>任务列表页：支持按状态（待接取/进行中/待确认）筛选</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-edit text-blue-500 mt-1 mr-2"></i>
                            <span>任务编辑页：</span>
                        </li>
                        <li class="pl-8 space-y-2">
                            <div class="flex items-start">
                                <i class="fas fa-circle text-xs text-blue-300 mt-2 mr-2"></i>
                                <span>基础信息区：任务名称、描述、截止日期</span>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-circle text-xs text-blue-300 mt-2 mr-2"></i>
                                <span>类型选择区：多维度类型勾选（支持组合选择）</span>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-circle text-xs text-blue-300 mt-2 mr-2"></i>
                                <span>奖励配置区：积分/经验值输入框，奖励类型选择器</span>
                            </div>
                            <div class="flex items-start">
                                <i class="fas fa-circle text-xs text-blue-300 mt-2 mr-2"></i>
                                <span>执行人选择：可指定孩子或设为开放接取</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 5.2 孩子端界面 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">5.2 孩子端界面</h3>
                
                <!-- 5.2.1 首页设计 -->
                <div class="mb-6">
                    <h4 class="text-lg font-medium mb-3">5.2.1 首页设计</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-user-circle text-blue-500 mt-1 mr-2"></i>
                            <span>个人数据区：当前积分、经验值进度条、已获得徽章展示</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-star text-blue-500 mt-1 mr-2"></i>
                            <span>推荐任务区：基于历史完成情况推荐的任务</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-tasks text-blue-500 mt-1 mr-2"></i>
                            <span>进行中任务：显示进行中的任务和剩余时间</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 5.2.2 任务详情页 -->
                <div>
                    <h4 class="text-lg font-medium mb-3">5.2.2 任务详情页</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-align-left text-blue-500 mt-1 mr-2"></i>
                            <span>任务描述区：清晰列出任务要求和步骤</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-paper-plane text-blue-500 mt-1 mr-2"></i>
                            <span>提交区域：文字描述输入框、图片上传按钮（可选）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-gift text-blue-500 mt-1 mr-2"></i>
                            <span>奖励预览区：完成后可获得的积分和经验值展示</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- 5.3 积分商城界面 -->
            <div>
                <h3 class="text-xl font-semibold mb-4">5.3 积分商城界面</h3>
                
                <!-- 5.3.1 商品展示 -->
                <div class="mb-6">
                    <h4 class="text-lg font-medium mb-3">5.3.1 商品展示</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-tags text-blue-500 mt-1 mr-2"></i>
                            <span>分类导航：虚拟奖励/实物奖励/特权奖励</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-box-open text-blue-500 mt-1 mr-2"></i>
                            <span>商品卡片：包含商品图片、名称、所需积分、剩余库存</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-exchange-alt text-blue-500 mt-1 mr-2"></i>
                            <span>兑换按钮：突出显示，点击后弹出确认对话框</span>
                        </li>
                    </ul>
                </div>
                
                <!-- 5.3.2 兑换流程 -->
                <div>
                    <h4 class="text-lg font-medium mb-3">5.3.2 兑换流程</h4>
                    <ol class="space-y-3 pl-6">
                        <li class="flex items-start">
                            <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>商品详情页显示兑换条件和说明</span>
                        </li>
                        <li class="flex items-start">
                            <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>点击"兑换"按钮弹出确认框</span>
                        </li>
                        <li class="flex items-start">
                            <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>确认后显示兑换成功页面，包含领取方式说明</span>
                        </li>
                    </ol>
                </div>
            </div>
        </section>

        <!-- 6. 通知系统设计 -->
        <section id="notification-system" class="glassmorphism p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">6</span>
                通知系统设计
            </h2>
            
            <!-- 6.1 家长通知类型 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">6.1 家长通知类型</h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-bell text-blue-500 mt-1 mr-2"></i>
                        <span>任务提交通知：孩子提交任务后实时推送</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-clock text-blue-500 mt-1 mr-2"></i>
                        <span>任务到期提醒：任务截止前24小时提醒</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-shopping-cart text-blue-500 mt-1 mr-2"></i>
                        <span>积分兑换通知：孩子兑换商品后通知家长</span>
                    </li>
                </ul>
            </div>
            
            <!-- 6.2 孩子通知类型 -->
            <div>
                <h3 class="text-xl font-semibold mb-4">6.2 孩子通知类型</h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-tasks text-blue-500 mt-1 mr-2"></i>
                        <span>新任务通知：有适合的新任务发布时</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                        <span>任务确认通知：提交的任务被确认完成</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-coins text-blue-500 mt-1 mr-2"></i>
                        <span>奖励到账通知：积分和经验值到账提醒</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-level-up-alt text-blue-500 mt-1 mr-2"></i>
                        <span>等级升级通知：获得新徽章或等级提升时</span>
                    </li>
                </ul>
            </div>
        </section>

        <!-- 7. 数据结构设计 -->
        <section id="data-structure" class="glassmorphism p-6 mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">7</span>
                数据结构设计
            </h2>
            
            <!-- 7.1 核心数据表 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">7.1 核心数据表</h3>
                
                <!-- 任务信息表 -->
                <div class="mb-6">
                    <h4 class="text-lg font-medium mb-3">任务信息表（tasks）</h4>
                    <div class="code-block">
                        <pre class="text-sm">| 字段名         | 类型          | 约束                     | 说明                              |
|----------------|---------------|--------------------------|-----------------------------------|
| task_id        | INT           | PK, AUTO_INCREMENT       | 任务唯一标识                      |
| title          | VARCHAR(100)  | NOT NULL                 | 任务标题                          |
| description    | TEXT          | NOT NULL                 | 任务详细描述                      |
| publisher_id   | INT           | FK → users.user_id       | 发布者ID                          |
| task_type      | ENUM          | NOT NULL                 | 任务类型：single/multi            |
| frequency_type | ENUM          | NOT NULL                 | 频次类型：once/repeat             |
| cycle_type     | ENUM          | NOT NULL                 | 周期类型：one_shot/phase          |
| status         | ENUM          | NOT NULL                 | 状态：pending/ongoing/confirming/completed/expired |
| points         | INT           | NOT NULL                 | 积分奖励                          |
| experience     | INT           | NOT NULL                 | 经验值奖励                        |
| deadline       | DATETIME      | NULL                     | 截止日期                          |
| repeat_cycle   | ENUM          | NULL                     | 重复周期：daily/weekly/monthly    |
| max_attempts   | INT           | DEFAULT 1                | 最大完成次数                      |
| created_at     | DATETIME      | DEFAULT NOW()            | 创建时间                          |
| updated_at     | DATETIME      | ON UPDATE NOW()          | 更新时间                          |</pre>
                    </div>
                </div>
                
                <!-- 子任务信息表 -->
                <div class="mb-6">
                    <h4 class="text-lg font-medium mb-3">子任务信息表（subtasks）</h4>
                    <div class="code-block">
                        <pre class="text-sm">| 字段名         | 类型          | 约束                     | 说明                              |
|----------------|---------------|--------------------------|-----------------------------------|
| subtask_id     | INT           | PK, AUTO_INCREMENT       | 子任务ID                          |
| parent_task_id | INT           | FK → tasks.task_id       | 关联主任务ID                      |
| title          | VARCHAR(100)  | NOT NULL                 | 子任务标题                        |
| sequence       | INT           | NOT NULL                 | 执行顺序                          |
| points         | INT           | NULL                     | 子任务独立积分                    |
| experience     | INT           | NULL                     | 子任务独立经验                    |</pre>
                    </div>
                </div>
                
                <!-- 用户信息表 -->
                <div>
                    <h4 class="text-lg font-medium mb-3">用户信息表（users）</h4>
                    <div class="code-block">
                        <pre class="text-sm">| 字段名           | 类型          | 约束                     | 说明                              |
|------------------|---------------|--------------------------|-----------------------------------|
| user_id          | INT           | PK, AUTO_INCREMENT       | 用户唯一标识                      |
| name             | VARCHAR(50)   | NOT NULL                 | 姓名                              |
| role             | ENUM          | NOT NULL                 | 角色：parent/child                |
| points_balance   | INT           | DEFAULT 0                | 积分余额                          |
| total_experience | INT           | DEFAULT 0                | 总经验值                          |
| current_level    | INT           | DEFAULT 1                | 当前等级                          |
| family_id        | INT           | FK → families.family_id  | 家庭ID                            |
| created_at       | DATETIME      | DEFAULT NOW()            | 创建时间                          |</pre>
                    </div>
                </div>
            </div>
            
            <!-- 7.2 关联表设计 -->
            <div>
                <h3 class="text-xl font-semibold mb-4">7.2 关联表设计</h3>
                
                <!-- 任务参与者表 -->
                <div class="mb-6">
                    <h4 class="text-lg font-medium mb-3">任务参与者表（task_participants）</h4>
                    <div class="code-block">
                        <pre class="text-sm">| 字段名           | 类型          | 约束                     | 说明                              |
|------------------|---------------|--------------------------|-----------------------------------|
| id               | INT           | PK, AUTO_INCREMENT       | 记录ID                            |
| task_id          | INT           | FK → tasks.task_id       | 任务ID                            |
| user_id          | INT           | FK → users.user_id       | 参与者ID                          |
| status           | ENUM          | NOT NULL                 | 参与状态：accepted/completed/rejected |
| join_time        | DATETIME      | DEFAULT NOW()            | 接取时间                          |
| completion_time  | DATETIME      | NULL                     | 完成时间                          |</pre>
                    </div>
                </div>
                
                <!-- 徽章记录表 -->
                <div>
                    <h4 class="text-lg font-medium mb-3">徽章记录表（user_badges）</h4>
                    <div class="code-block">
                        <pre class="text-sm">| 字段名       | 类型          | 约束                     | 说明                              |
|--------------|---------------|--------------------------|-----------------------------------|
| id           | INT           | PK, AUTO_INCREMENT       | 记录ID                            |
| user_id      | INT           | FK → users.user_id       | 用户ID                            |
| badge_id     | INT           | FK → badges.badge_id     | 徽章ID                            |
| obtained_at  | DATETIME      | DEFAULT NOW()            | 获取时间                          |</pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- 8. 异常情况处理机制 -->
        <section id="exception-handling" class="glassmorphism p-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
                <span class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">8</span>
                异常情况处理机制
            </h2>
            
            <!-- 8.1 任务过期处理 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">8.1 任务过期处理</h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-clock text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">过期判定</span>：系统每日凌晨扫描过期未完成任务</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-sync-alt text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">状态更新</span>：自动将超期任务标记为"expired"状态</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-bell text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">用户通知</span>：向任务参与者发送过期提醒</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-redo text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">重试机制</span>：重复任务过期后自动重置为"pending"状态</span>
                    </li>
                </ul>
            </div>
            
            <!-- 8.2 任务冲突解决 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">8.2 任务冲突解决</h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-users text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">资源竞争</span>：多人任务限制最大参与者数量</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-exclamation-triangle text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">重复接取</span>：同一用户不能重复接取同一任务</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-lock text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">状态锁定</span>：任务提交后至确认前处于锁定状态，防止重复操作</span>
                    </li>
                </ul>
            </div>
            
            <!-- 8.3 奖励发放保障 -->
            <div class="mb-8">
                <h3 class="text-xl font-semibold mb-4">8.3 奖励发放保障</h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-database text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">事务处理</span>：积分经验发放使用数据库事务，确保原子性</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-redo-alt text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">失败重试</span>：发放失败时系统自动重试3次</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-clipboard-list text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">日志记录</span>：所有奖励变动记录详细日志，支持对账</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-user-edit text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">人工干预</span>：异常情况可由家长手动调整积分经验值</span>
                    </li>
                </ul>
            </div>
            
            <!-- 8.4 数据一致性维护 -->
            <div>
                <h3 class="text-xl font-semibold mb-4">8.4 数据一致性维护</h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-check-double text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">定期校验</span>：每日执行数据校验任务，检查积分经验与任务完成记录是否匹配</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-tools text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">自动修复</span>：轻微不一致自动修复，严重不一致触发家长通知</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-history text-blue-500 mt-1 mr-2"></i>
                        <span><span class="font-medium">历史快照</span>：每周日生成数据快照，支持数据回溯</span>
                    </li>
                </ul>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-50 py-8 mt-12">
        <div class="container mx-auto px-4 text-center text-gray-500">
            <p>created by <a href="https://space.coze.cn/" class="text-blue-500 hover:text-blue-600">coze space</a></p>
            <p class="mt-2">页面内容均由 AI 生成，仅供参考</p>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('mobileMenuButton').addEventListener('click', function() {
            document.getElementById('mobileMenu').classList.toggle('active');
            this.querySelector('i').classList.toggle('fa-bars');
            this.querySelector('i').classList.toggle('fa-times');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 如果是移动端菜单链接，点击后关闭菜单
                    if (window.innerWidth < 768) {
                        document.getElementById('mobileMenu').classList.remove('active');
                        document.getElementById('mobileMenuButton').querySelector('i').classList.remove('fa-times');
                        document.getElementById('mobileMenuButton').querySelector('i').classList.add('fa-bars');
                    }
                }
            });
        });

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const nav = document.querySelector('nav');
            if (window.scrollY > 50) {
                nav.classList.add('shadow-md');
            } else {
                nav.classList.remove('shadow-md');
            }
        });
    </script>

</body></html>